<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>环状图</title>
   <script src="../../js/echarts.js"></script>
   <style type="text/css">
		.chats{
			width: 48%;
			height:300px;
			float:left;
			margin-top: 2%;
			margin-left:1%
		}		
    		
   </style>
</head>
<body>

     <div id="main"  class="chats" ></div>
     <div id="main1" class="chats" ></div>
     <div id="main2" class="chats" ></div>
	 <div id="main3" class="chats" ></div>
	 
     <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
		 var myChart3 = echarts.init(document.getElementById('main3'));

        // 指定图表的配置项和数据
       /* var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);*/
 

option1 = {
	title: {
        text: '交通费用'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data:['已用','在途','剩余']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'right'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
              
                {value:310, name:'已用'},
                {value:234, name:'在途'},
                {value:135, name:'剩余'},
               
            ]
        }
    ]
};

option2 = {
	title: {
        text: '物业费用'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data:['已用','在途','剩余']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'right'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
              
                {value:310, name:'已用'},
                {value:234, name:'在途'},
                {value:135, name:'剩余'},
               
            ]
        }
    ]
};

option3 = {
	title: {
        text: '员工福利'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data:['已用','在途','剩余']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'right'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
              
                {value:310, name:'已用'},
                {value:234, name:'在途'},
                {value:135, name:'剩余'},
               
            ]
        }
    ]
};

option4 = {
	title: {
        text: '差旅费用'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data:['已用','在途','剩余']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'right'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
              
                {value:310, name:'已用'},
                {value:234, name:'在途'},
                {value:135, name:'剩余'},
               
            ]
        }
    ]
};
myChart.setOption(option1);
myChart1.setOption(option2);
myChart2.setOption(option3);
myChart3.setOption(option4);
getChartData();
    </script>
 <script type="text/javascript">  
        function getChartData() {  
            //获得图表的options对象  
            var options = myChart.getOption();  
			alert.console(11111);
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url : "http://localhost:8080/EchartsDemo/bar.json",  
                data : {},  
                dataType : "json", //返回数据形式为json  
                success : function(result) {  
                    if (result) {
                        var label = [];
                        var value = [];
                        var xAxis = [];
                        $.each(result,function(i,p){
                            label[i]=p['bar'];
                            xAxis[i]=p['time'];
                            value[i]=p['value'];
                            });
                        options.legend.data = label;   
                        options.series[0].data = value;  
                        options.xAxis[0].data = xAxis;
 
                        myChart.hideLoading();  
                        myChart.setOption(options);  
 
                    }  
                },  
                error : function(errorMsg) {  
                    alert("不好意思，大爷，图表请求数据失败啦!");  
                    myChart.hideLoading();  
                }  
            });  
        }  
    </script> 
</body>
</html>
</body>
</html>